/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  ScrollView,
  Dimensions,
} from 'react-native';

import Screen from './HomeScreen.js';

export default class SlideShowView extends Component {

  constructor(props){
  	super(props);
  	this.state = {
      currentPage:0,
    };
    this._index = 0;
  }
  _scrollView:ScrollView;
  render() {
    return (
      <View style={styles.container}>
        <ScrollView
          ref = {(scrollView) => {_scrollView = scrollView}}
          horizontal = {true}
          showsHorizontalScrollIndicator = {false}
          pagingEnabled = {true}
          onMomentumScrollEnd = {this._onMomentumScrollEnd}

          onScrollBeginDrag={this._onScrollBeginDrag}
          // 停止拖拽
          onScrollEndDrag={this._onScrollEndDrag}
        >
          {this.setUpADImages()}
        </ScrollView>
        <View style={styles.circleViewStyle}>
          {this.setUpCircleView()}
        </View>
      </View>
    );
  }

  _onScrollBeginDrag=()=>{
    console.log('onScrollBeginDrag-----开始拖拽')
    this._stopTimer();
  }

  _onScrollEndDrag=()=>{
    console.log('onScrollEndDrag-----结束拖拽')
    this._runTimer();
  }

  _runTimer = ()=>{
    // if (this.props.slideShowData.length <= 1) {
    //   return;
    // }

    this._timer = setInterval(() => {
      this._index++;
      if (this._index >= this.props.slideShowData.length) {
        this._index = 0;
      }
      _scrollView.scrollTo({x:this._index*Screen.width},true)
      this.setState({
        currentPage:this._index
      })
    },3000);
  }

  _stopTimer(){
    clearInterval(this._timer);
  }

  componentDidMount() {
    this._runTimer();
  }

  componentWillUnmount() {
    this._stopTimer();
  }

  _onMomentumScrollEnd = (scrollvew) => {
    var offsetX = scrollvew.nativeEvent.contentOffset.x;
    var currentPage = Math.floor(offsetX / Screen.width);
    this.setState({
      currentPage:currentPage,
    })
  }

  setUpCircleView(){
    var indicatorArr = [];
    var imgsArr = this.props.slideShowData;
    for (let i = 0; i < imgsArr.length; i++) {
      indicatorArr.push(
        <Text
          key = {i}
          style = {{fontSize:25, color:this.state.currentPage==i?'white':'rgb(55,55,55)', backgroundColor:'transparent'}}
        >
          &bull;
        </Text>
      )
    }
    return indicatorArr;
  }

  setUpADImages(){
    var allADImg = [];
    var slideDataArr = this.props.slideShowData;
    for (let i = 0; i < slideDataArr.length; i++) {
      var ADItem = slideDataArr[i];
      allADImg.push(
        <Image
          source = {{uri: ADItem.cover}}
          style = {styles.ADStyle}
          key = {i}
        />
      )
    }
    return allADImg;
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor:'rgb(242,242,242)',
    height:185,
    width:Screen.width
  },
  ADStyle:{
    width: Screen.width,
    height: 185,
  },
  circleViewStyle:{
    width:Screen.width,
    height:25,
    position:'absolute',
    bottom:0,
    flexDirection:'row',
    justifyContent:'center',
  },
});
